<script lang="ts" setup>
import { MoreFilled } from '@element-plus/icons-vue';
</script>
<template>
    <div class="cards-div">
        <div class="cards-btns">
            <el-button>新增卡片</el-button>
        </div>
        <div class="cardslist">
            <div v-for="item in 12" class="card">
                <div class="card-title">
                    <div style="width: calc(100% - 40px);text-align: center;">
                        标题{{ item }}
                    </div>
                    <div >
                        <el-dropdown>
                            <el-button size="small" style="height: 40px;width: 40px;background: transparent;border: none;">
                                <el-icon style="transform: rotate(90deg);"><MoreFilled/></el-icon>
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item>编辑</el-dropdown-item>
                                    <el-dropdown-item>删除</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="card-content">

                </div>
            </div>
        </div>
    </div>
</template>

<style>
.cards-div{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.cards-btns{
    width: 100%;
    height: 40px;
    background: rgba(100,100,100,0.1);
    display: flex;
    align-items: center;
    padding: 0px 5px;
    box-sizing: border-box;
}
.cardslist{
    width: 100%;
    height: calc(100% - 40px);
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;

}
.card{
    height:250px;
    min-width: 300px;
    flex: calc((100% - 10px - 30px)/4);
    background: gray;
    margin: 5px 5px;
    border-radius: 5px;
}
.card-title{
    width: 100%;
    height: 40px;
    background: rgba(200,200,200,1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-content{
    width: 100%;
    height: 260px;
}
</style>